<template>
  <div class="accountinfo">
    <el-dialog :visible="dialogVisible" width="50%">
      <el-form>
        <span class="title" v-if="Type == 'look'">查看</span>
        <span class="title" v-else>修改</span>
        <div class="essential">
          <el-form-item label="账号">
            <el-input
              v-model="form.account"
              autocomplete="off"
              :disabled="Type == 'look' ? true : false"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="form.password"
              autocomplete="off"
              :disabled="Type == 'look' ? true : false"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input
              v-model="form.doctorName"
              autocomplete="off"
              :disabled="Type == 'look' ? true : false"
            ></el-input>
          </el-form-item>

          <el-form-item label="选择角色:">
            <el-select
              placeholder="请选择"
              :disabled="Type == 'look' ? true : false"
              v-model="form.roleName"
            >
              <el-option
                v-for="itm in rolelist"
                :key="itm.value"
                :label="itm.roleName"
                :value="itm.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择科室:">
            <el-select
              placeholder="请选择"
              :disabled="Type == 'look' ? true : false"
              v-model="form.departmentName"
            >
              <el-option
                v-for="itm in departmentlist2"
                :key="itm.value"
                :label="itm.departmentName"
                :value="itm.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="角色">
            <el-input
              v-model="form.roleName"
              autocomplete="off"
              :disabled="Type == 'look' ? true : false"
            ></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="选择科室:">
            <el-input
              v-model="form.departmentId"
              autocomplete="off"
              :disabled="Type == 'look' ? true : false"
            ></el-input>
          </el-form-item> -->
        </div>
        <div class="manageSide">
          <span class="title">PC端</span>
          <el-checkbox-group v-model="checkList">
            <el-form-item v-for="(item, index) of pcMenu" :key="index">
              <el-checkbox :label="item.id">
                <span>
                  {{ item.title }}
                </span>
              </el-checkbox>
              <el-select
                @change="selectAll($event, item.id)"
                :disabled="checkList.indexOf(item.id) == -1 ? true : false"
                v-model="item.label"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="itm in departmentlist"
                  :key="itm.value"
                  :label="itm.departmentName"
                  :value="itm.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-checkbox-group>
        </div>
        <div class="mobileterminal">
          <span class="title">APP端</span>
          <el-checkbox-group v-model="checkphone">
            <el-form-item v-for="(item, index) of moveextentList" :key="index">
              <el-checkbox :label="item.id">
                <span>
                  {{ item.title }}
                </span>
              </el-checkbox>
              <el-select
                @change="selectAll($event, item.id)"
                v-model="item.value"
                multiple
                placeholder="请选择"
                :disabled="checkphone.indexOf(item.id) == -1 ? true : false"
              >
                <el-option
                  v-for="itm in departmentlist"
                  :key="itm.id"
                  :label="itm.departmentName"
                  :value="itm.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-checkbox-group>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: true,
      form: {
        account: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rolelist: [], //角色列表下拉框
      checkList: [],
      checkLabel1: [
        {
          label: "首页:",
          value: [],
        },
        {
          label: "添加患者:",
          value: [],
        },
        {
          label: "数据管理:",
          value: [],
        },
        {
          label: "床位管理:",
          value: [],
        },
        {
          label: "设备管理:",
          value: [],
        },
        {
          label: "质量管理:",
          value: [],
        },
        {
          label: "角色管理:",
          value: [],
        },
        {
          label: "条形码:",
          value: [],
        },
        {
          label: "科室管理:",
          value: [],
        },
      ],
      departmentlist: [
        {
          label: "妇产科妇产科妇产科",
          value: "10",
        },
        {
          label: "骨科",
          value: "20",
        },
        {
          label: "美容科",
          value: "30",
        },
        {
          label: "眼科",
          value: "40",
        },
        {
          label: "全选",
          value: "99",
        },
      ],
      // APP端
      moveextentList: [
        {
          label: "首页:",
          value: "",
        },
        {
          label: "添加患者:",
          value: "",
        },
        {
          label: "血糖管理:",
          value: "",
        },
      ],
      checkphone: [
        { id: 1, title: "主页" },
        { id: 2, title: "主页" },
        { id: 3, title: "主页" },
      ],
      pcMenu: [
        // {
        //   id: 4,
        //   deanId: 2,
        //   title: "主页",
        //   parentId: 0,
        //   path: "/home",
        //   alwaysShow: false,
        //   redirect: "/index",
        //   component: "layout",
        //   roles: "sys:noAccess",
        //   hidden: false,
        //   perOrder: 1,
        //   createTime: "2021-04-14T01:03:11.000+0000",
        //   updateTime: "2021-04-14T01:03:14.000+0000",
        //   isDelete: "0",
        //   clientType: "0",
        // },
        // {
        //   id: 6,
        //   deanId: 2,
        //   title: "床位管理",
        //   parentId: 0,
        //   path: "/beds",
        //   alwaysShow: true,
        //   redirect: "/bedManagement",
        //   component: "layout",
        //   roles: "sys:noAccess",
        //   hidden: false,
        //   perOrder: 1,
        //   createTime: "2021-04-14T01:08:20.000+0000",
        //   updateTime: "2021-04-14T01:08:22.000+0000",
        //   isDelete: "0",
        //   clientType: "0",
        // },
        // {
        //   id: 8,
        //   deanId: 2,
        //   title: "患者详情",
        //   parentId: 0,
        //   path: "/patient",
        //   alwaysShow: false,
        //   redirect: "/patientDetails",
        //   component: "layout",
        //   roles: "sys:noAccess",
        //   hidden: true,
        //   perOrder: 1,
        //   createTime: "2021-04-14T01:11:55.000+0000",
        //   updateTime: "2021-04-14T01:11:57.000+0000",
        //   isDelete: "0",
        //   clientType: "0",
        // },
        // {
        //   id: 10,
        //   deanId: 2,
        //   title: "添加患者",
        //   parentId: 0,
        //   path: "/patientadd",
        //   alwaysShow: true,
        //   redirect: "/addPatient",
        //   component: "layout",
        //   roles: "sys:noAccess",
        //   hidden: false,
        //   perOrder: 1,
        //   createTime: "2021-04-14T01:14:38.000+0000",
        //   updateTime: "2021-04-14T01:14:40.000+0000",
        //   isDelete: "0",
        //   clientType: "0",
        // },
      ],
      appMenu: [
        {
          id: 1,
          deanId: 2,
          title: "HomePage",
          alwaysShow: true,
          roles: "sys:homePage",
          hidden: true,
          perOrder: 1,
          createTime: "2021-04-08T07:59:54.000+0000",
          updateTime: "2021-04-14T02:00:53.000+0000",
          isDelete: "0",
          clientType: "1",
        },
        {
          id: 2,
          deanId: 2,
          title: "InstallUser",
          alwaysShow: true,
          roles: "sys:addUser",
          hidden: true,
          perOrder: 2,
          createTime: "2021-04-08T08:34:03.000+0000",
          updateTime: "2021-04-14T02:00:56.000+0000",
          isDelete: "0",
          clientType: "1",
        },
        {
          id: 3,
          deanId: 2,
          title: "TestGluce",
          alwaysShow: true,
          roles: "sys:testGluce",
          hidden: true,
          perOrder: 3,
          createTime: "2021-04-08T08:35:20.000+0000",
          updateTime: "2021-04-14T02:00:58.000+0000",
          isDelete: "0",
          clientType: "1",
        },
      ],
      checkLabel: [],
      departmentlist2: [],
    };
  },
  props: {
    // 控制弹框显示关闭
    editRoleDialog: {
      type: Boolean,
      required: true,
    },
    Type: {
      type: String,
    },
    list: {
      type: Object,
    },
  },
  mounted() {
    // console.log(this.editRoleDialog);
    // console.log(this.Type);
    // console.log(this.list);
    sessionStorage.setItem("roleId", this.list.userId); //缓存角色管理的userid，方便给后台发送的时候携带
    this.dialogVisible = this.editRoleDialog;
    let routeid = sessionStorage.getItem("routeID");
    let routeID = routeid ? JSON.parse(routeid)["/index"] : "";
    // 查询科室
    this.getDepartment(routeID);
    let data = {};
    this.getRoleInfo(data); //获取全部角色的下拉框
    this.getRole(data); //查看和修改的时候回显角色信息
  },
  methods: {
    // 查看时获取角色信息
    getRole(data) {
      this.$api
        .getRole(data)
        .then((res) => {
          this.form = res.data.roleInfo; //用户名密码基本信息
          let allInfoPc = res.data.allInfoPc; //pc端全部信息
          let allInfoApp = res.data.allInfoApp; //移动端全部信息
          //pc端获取数据
          this.pcMenu = allInfoPc;
          //APP端获取数据
          this.moveextentList = allInfoApp;
          if (res.data.roleInfoPcList || res.data.roleInfoAppList) {
            let roleInfoPcList = res.data.roleInfoPcList; //pc端选中状态信息
            let roleInfoAppList = res.data.roleInfoAppList; //移动端对比信息
          }

          // pc端判断选中状态
          roleInfoPcList.forEach((item) => {
            for (let i = 0; i < allInfoPc.length; i++) {
              if (allInfoPc[i].id == item.id) {
                allInfoPc[i].departmentList = item.departmentList;
              }
            }
          });
          // PC多选框绑定数组(值存在选中状态)
          this.checkList = roleInfoPcList.map((item) => {
            return (item = item.id);
          });
          roleInfoPcList.forEach((item) => {
            this.pcMenu.forEach((itm) => {
              if (item.id == itm.id) {
                itm.label = item.departmentList;
              }
            });
          });
          console.log(this.pcMenu);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查询所有科室
    getDepartment(val) {
      let data = {
        perId: val,
      };
      this.$api.getDepartment(data).then((res) => {
        // this.departmentlist = res.data.data;
        this.departmentlist2 = res.data.data;
        // console.log(this.departmentlist2);
        let departmentList = res.data.data.map((item) => {
          return {
            id: item.id,
            departmentName: item.departmentName,
          };
        });
        // 添加一个全选
        departmentList.push({
          id: 99,
          departmentName: "全选",
        });
        let obj = JSON.stringify(departmentList);
        this.departmentlist = JSON.parse(obj);
        // console.log(this.departmentlist);
        // console.log(this.checkLabel);
      });
    },
    //选择角色下拉框
    getRoleInfo() {
      let data = {};
      this.$api.getRoleInfo(data).then((res) => {
        // console.log(res.data.data);
        this.rolelist = res.data.data;
      });
    },
    // 修改

    // 确定提交
    submit() {
      // 过滤app选中时的数据
      let checkList2 = this.checkphone.filter((item) => {
        return item.title != "主页";
      });
      console.log(checkList2); //app
      console.log(this.checkList); //pc
      // console.log(this.checkLabel);
      // 判断是查看还是修改
      if (this.Type == "edit") {
        this.$parent.editDetails(false);
        this.updateRole(data);
      } else {
        this.$parent.lookDetails(false);
      }
    },
    //关闭弹框
    closeDialog() {
      this.$parent.lookDetails(false);
    },
    selectAll(val, id) {
      // console.log(val);
      // console.log(id);

      // 因为全选之后,下拉框里不能出现全选本身这个内容,需要先截取掉
      let temporary = this.departmentlist.filter((item) => {
        return item.id != "99";
      });
      // console.log(temporary);

      // 判断如果勾选全部的情况

      if (val[0] == "99") {
        // console.log(this.checkLabel);
        for (let i = 0; i < this.checkLabel.length; i++) {
          console.log(this.checkLabel[i].id);
          if (id == this.checkLabel[i].id) {
            this.checkLabel[i].value = temporary.map((item) => {
              return (item = item.id);
            });
          }
        }
      }
    },
    // selectAll(val, id) {
    //   // 因为全选之后,下拉框里不能出现全选本身这个内容,需要先截取掉
    //   let temporary = this.departmentlist.filter((item) => {
    //     return item.id != "99";
    //   });
    //   console.log(temporary);
    //   // 判断如果勾选全部的情况
    //   if (val.indexOf("99") != -1) {
    //     for (let i = 0; i < this.checkLabel.length; i++) {
    //       if (id == this.checkLabel[i].id) {
    //         this.checkLabel[i].value = temporary.map((item) => {
    //           return (item = item.value);
    //         });
    //       }
    //     }
    //   }
    // },
  },
};
</script>

<style lang="scss" scoped>
.accountinfo {
  .title {
    display: block;
    text-align: center;
    font-size: 20px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
    margin-bottom: 25px;
  }
  .el-form {
    padding: 0 20px;
    // 公共信息样式
    .essential {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .el-form-item {
        // background-color: violet;
        display: flex;
        width: 30%;
        height: 40px;
        & >>> .el-form-item__label {
          width: 95px;
          height: 40px;
          text-align: left;
        }
        & >>> .el-form-item__content {
        }
      }
      @media screen and (max-width: 1474px) {
        .el-form-item {
          width: 50%;
        }
      }
    }
    @media screen and (max-width: 919px) {
      .essential {
        justify-content: center;
        .el-form-item {
          width: 80%;
          justify-content: space-between;
        }
      }
    }
    // pc端和app端的样式
    .manageSide,
    .mobileterminal {
      .el-checkbox-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .el-form-item {
          width: 30%;
          // height: 60px;
          & >>> .el-form-item__content {
            display: flex;
            justify-content: space-between;
            .el-checkbox {
              width: 95px;
              // height: 60px;
              // line-height: 60px;
              margin: 0;
            }
            .el-input__inner {
              max-width: 180px;
              // height: 60px;
            }
          }
        }
      }
    }
    @media screen and (max-width: 1474px) {
      .manageSide {
        .el-checkbox-group {
          .el-form-item {
            width: 50%;
            & >>> .el-form-item__content {
              display: flex;
              justify-content: flex-start;
            }
          }
        }
      }
      .mobileterminal {
        .el-checkbox-group {
          .el-form-item {
            width: 50%;
            & >>> .el-form-item__content {
              display: flex;
              justify-content: flex-start;
            }
          }
        }
      }
    }
    @media screen and (max-width: 919px) {
      .manageSide {
        .el-checkbox-group {
          justify-content: center;
          .el-form-item {
            width: 80%;
            justify-content: center;
            & >>> .el-form-item__content {
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
      .mobileterminal {
        .el-checkbox-group {
          justify-content: center;
          .el-form-item {
            width: 80%;
            justify-content: center;
            & >>> .el-form-item__content {
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
    }
  }
  & >>> .el-dialog__footer {
    background-color: rgba(1, 167, 240, 0.1);
    text-align: center;
  }
}
</style>